<template>
    <div id="message">
        <div class="message_top">
            <table class="offthree_tab">
                <thead>
                <tr>
                    <th @click="show_province=true"><p>按城市</p><p>咨询会议</p></th>
                    <th @click="show_type=true"><p>按检索类型</p><p>咨询会议</p></th>
                    <th><p>我投稿的会议</p><p>咨询会议</p></th>
                </tr>
                </thead>
            </table>
        </div>
        <!--列表-->
        <div class="message_cen">
            <div class="message_content">
                <div class="content_title"><p>第四届智能计算与信号处理国际学术会议（ICSP 2019）第四届智能计算与信号处理国际学术会议（ICSP 2019）第四届智能计算与信号处理国际学术会议（ICSP 2019）第四届智能计算与信号处理国际学术会议（ICSP 2019）</p></div>
                <!--图片-->
                <div class="headimg">
                    <img  src="http://lemonplus.top/keo/static/img/officer.d7982e9.jpg">
                    <div class="head_title">
                        <div class="head_title_box">
                            <p class="head_text_top">第五届传感器、机电一体和自动化系统国际学术研究</p>
                            <span class="head_text"><i class="head_textil"></i><span class="vli">2019.1.18</span></span><span class="head_text"><i class="head_textir"></i><span class="vli">中国-三亚</span></span>
                        </div>
                    </div>
                </div>
                <!--图片end-->
                <div class="content_bottom">
                    <div class="content_bleft">
                        <router-link :to="{ path: 'online', query: {}}">
                            <i></i><span>在线咨询</span>
                        </router-link>
                    </div>
                    <div class="content_bright"  @click="phones(1)">
                        <i></i><span>电话咨询</span>
                    </div>
                </div>
            </div>
        </div>
        <!--列表-->
        <!--列表-->
        <div class="message_cen">
            <div class="message_content">
                <div class="content_title"><p>第四届智能计算与信号处理国际学术会议（ICSP 2019）第四届智能计算与信号处理国际学术会议（ICSP 2019）第四届智能计算与信号处理国际学术会议（ICSP 2019）第四届智能计算与信号处理国际学术会议（ICSP 2019）</p></div>
                <!--图片-->
                <div class="headimg">
                    <img  src="http://lemonplus.top/keo/static/img/officer.d7982e9.jpg">
                    <div class="head_title">
                        <div class="head_title_box">
                            <p class="head_text_top">第五届传感器、机电一体和自动化系统国际学术研究</p>
                            <span class="head_text"><i class="head_textil"></i><span class="vli">2019.1.18</span></span><span class="head_text"><i class="head_textir"></i><span class="vli">中国-三亚</span></span>
                        </div>
                    </div>
                </div>
                <!--图片end-->
                <div class="content_bottom">
                    <div class="content_bleft">
                        <i></i><span>在线咨询</span>
                    </div>
                    <div class="content_bright" @click="phones(2)">
                        <i></i><span>电话咨询</span>
                    </div>
                </div>
            </div>
        </div>
        <!--列表-->
        <!--电话-->
        <van-popup class="showphonew" v-model="showphone" position="top" :overlay="true" overlay-class="showphonestyle">
            <div class="showphone">
                <div class="showphone-title">电话咨询</div>
                <a v-for="item in phone" class="showphone-p" :href="'tel:' + item.phone">{{item.phone}}</a>
            </div>
        </van-popup>
        <!--电话-->
        <!--城市-->
        <van-popup  v-model="show_province" position="bottom" :overlay="true" overlay-class="showphonestyle">
            <van-area  class="show_province" :area-list="areaList" :columns-num="2" title="请选择城市" @confirm="onprovince" @cancel="show_province=false"/>
        </van-popup>
        <!--城市-->
        <!--类型-->
        <van-popup  v-model="show_type" position="bottom" :overlay="true" overlay-class="showphonestyle">
            <van-picker class="show_province" show-toolbar title="请选择检索类型" :columns="columns" @cancel="show_type=false" @confirm="ontype"/>
        </van-popup>
        <!--类型-->
    </div>
</template>
<script>

    import areaList from '@/utils/area.js'
    import { Toast } from 'vant';
    export default {
        name: "message",
        data(){
            return{
                showphone:false,
                showprovince:false,
                show_province:false,
                show_type:false,
                areaList,
                phone: [
                    {phone: 123456789},
                    {phone: 13800138000},
                    {phone: 123456789},
                    {phone: 123456789},
                ],
                columns: ['SCI', 'EI', 'CPCI', 'Scopus', 'CPCI-S', 'CPCI-SSH']
            }
        },
        beforeCreate(){
            // console.log('beforeCreate:刚刚new Vue()之后，这个时候，数据还没有挂载呢，只是一个空壳')
            // console.log(this.msg)//undefined
            // console.log(document.getElementsByClassName("myp")[0])//undefined
        },
        created(){
            // console.log('created:这个时候已经可以使用到数据，也可以更改数据,在这里更改数据不会触发updated函数')
            // this.msg+='!!!'
            // console.log('在这里可以在渲染前倒数第二次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取')
            // console.log('接下来开始找实例或者组件对应的模板，编译模板为虚拟dom放入到render函数中准备渲染')
        },
        beforeMount(){
            // console.log('beforeMount：虚拟dom已经创建完成，马上就要渲染,在这里也可以更改数据，不会触发updated')
            // this.msg+='@@@@'
            // console.log('在这里可以在渲染前最后一次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取')
            // console.log(document.getElementsByClassName("myp")[0])//undefined
            // console.log('接下来开始render，渲染出真实dom')
        },
        // render:function(createElement){
        //     console.log('render')
        //     return createElement('div','hahaha')
        // },
        mounted(){
            // this.$router()
            // this.id = this.$route.query.id
            // this.$fetch('/mobile/meeting/getNews',
            //   {id:this.$route.query.id}
            // )
            //   .then((response) => {
            //     console.log(response)
            //     this.news =response.data.content
            //   }).catch(err => {
            //   Toast({
            //     message: '获取数据失败',
            //     duration: 3000
            //   });
            // })
        },
        methods: {
            newsp:function(){

            },
            phones:function (num) {
                this.showphone=true
            },
            onprovince:function (value) {
                this.show_province=false
                console.log(value[0].name,value[1].name)
            },
            ontype:function (value, index) {
                Toast('当前值：'+value+', 当前索引：'+index+'');
            }
        },
        watch:{

        },
        beforeUpdate:function(){
            //这里不能更改数据，否则会陷入死循环
            // console.log('beforeUpdate:重新渲染之前触发')
            // console.log('然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染')
        },
        updated:function(){
            //这里不能更改数据，否则会陷入死循环
            // console.log('updated:数据已经更改完成，dom也重新render完成')
        },
        beforeDestroy:function(){
            // console.log('beforeDestory:销毁前执行（$destroy方法被调用的时候就会执行）,一般在这里善后:清除计时器、清除非指令绑定的事件等等...')
            // clearInterval(this.$options.timer)
        },
        destroyed:function(){
            // console.log('destroyed:组件的数据绑定、监听...都去掉了,只剩下dom空壳，这里也可以善后')
        }
    }
</script>

<style lang="scss"  scoped>
    @import '../../common/style/common.css';
    @import "../../common/style/common.scss";
    #message{
        .message_top{
            .offthree_tab{
                width: 100%;
                text-align: center;
                /*border: 1px solid rgba(215, 215, 215, 1);!*no*!*/
                margin-bottom: 30px;
                thead tr th{
                    padding:14px 0;
                    border: 1px solid rgba(215, 215, 215, 1);/*no*/
                    border-top:none;
                    background-color: #557ae4;
                    color: #fff;
                    p{
                        line-height: 30px;
                        font-size: 26px;
                    }
                }
                thead tr th:nth-child(1){
                    width: 33.3%;
                    border-left: none;
                }
                thead tr th:nth-child(2){
                    width: 33.3%;
                }
                thead tr th:nth-child(3){
                    width: 33.3%;
                    border-right: none;
                }
            }
        }
        .message_cen{
            padding: 0 20px;
            .message_content{
                border: 1px solid rgba(228, 228, 228, 1);/*no*/
                box-shadow: 0 1px 2px #ddd; /*no*/
                -webkit-border-radius: 10px;
                -moz-border-radius: 10px;
                border-radius: 10px;
                margin-bottom: 20px;
                .content_title{
                    padding: 12px 40px;
                    p{
                        text-align: center;
                        -webkit-line-clamp: 2;
                        overflow: hidden;
                        word-wrap: break-word;
                        word-break: break-all;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        font-size: 26px;
                        font-weight: bold;
                        line-height: normal;
                    }
                }
                /*头部*/
                .headimg{
                    width: $wid;
                    height: 130*2px;
                    overflow: hidden;
                    position: relative;
                    img{
                        width: $wid;
                        height: 130*2px;
                        border: 0;
                    }
                    .head_title{
                        width: $wid;
                        position: absolute;
                        bottom: 10px;
                        .head_title_box{
                            /*这个是高斯模糊*/
                            /*&::after{*/
                            /*display: block;*/
                            /*content: '';*/
                            /*background: url("../../common/image/dd.png");*/
                            /*width: 100%;*/
                            /*height: 90px;*/
                            /*position: absolute;*/
                            /*left: 0;*/
                            /*bottom: 20px;*/
                            /*filter: blur(20px);*/
                            /*overflow: hidden;*/
                            /*}*/
                            padding: 0 30px 10px 30px;
                            overflow: hidden;
                            clear: none;
                            background-color: rgba(255,255,255,.5);
                            /*filter: blur(1px);*/
                            .head_text_top{
                                height: 30*2px;
                                line-height: 30*2px;
                                font-size: 28px;
                                font-weight: 600;
                                color: #fff;
                                text-align: center;
                                overflow: auto;
                                white-space: nowrap;
                            }
                            .head_text{
                                float: left;
                                width: 50%;
                                text-align: center;
                                font-size: 24px;
                                color: #fff;
                                font-weight: 600;
                                overflow: auto;
                                white-space: nowrap;
                                .head_textil{
                                    width: 28px;
                                    height: 28px;
                                    display: inline-block;
                                    background-image: url('../../common/image/metime.png');
                                    background-repeat: no-repeat;
                                    background-position: center;
                                    background-size: 100% 100%;
                                    margin-right: 10px;
                                }
                                .head_textir{
                                    width: 28px;
                                    height: 28px;
                                    display: inline-block;
                                    background-image: url('../../common/image/megps.png');
                                    background-repeat: no-repeat;
                                    background-position: center;
                                    background-size: 100% 100%;
                                    margin-right: 10px;
                                }
                                .vli{
                                    vertical-align: text-top;
                                }
                            }
                        }
                    }
                }
                .content_bottom{
                    width: 100%;
                    text-align: center;
                    clear: none;
                    overflow: hidden;
                    .content_bleft{
                        float: left;
                        width: 50%;
                        padding: 10px 0;
                        color: #51CE6F;
                        font-weight: bold;
                        font-size: 26px;
                        i{
                            width: 44px;
                            height: 44px;
                            display: inline-block;
                            background-image: url('../../common/image/mesmes.png');
                            background-repeat: no-repeat;
                            background-position: center;
                            background-size: 100% 100%;
                            margin-right: 10px;
                        }
                        span{
                            vertical-align: super;
                            font-weight: bold;
                            color: #51CE6F;
                        }
                    }
                    .content_bright{
                        float: left;
                        width: 50%;
                        padding: 10px 0;
                        color: #52A8EE;
                        font-weight: bold;
                        font-size: 26px;
                        position: relative;
                        i{
                            width: 44px;
                            height: 44px;
                            display: inline-block;
                            background-image: url('../../common/image/mephone.png');
                            background-repeat: no-repeat;
                            background-position: center;
                            background-size: 100% 100%;
                            margin-right: 10px;
                        }
                        span{
                            vertical-align: super;
                            font-weight: bold;
                            color: #557ae4;
                        }
                    }
                    div:nth-child(2):after{
                        content:"";
                        height: 70px;
                        width: 1px; /*no*/
                        position: absolute;
                        left: 0;
                        top: 0;
                        background-color: #E4E4E4;
                    }
                }
            }
        }
    }
    .showphone{
        width: 400px;
        background-color: #fff;
    }
</style>
<style>
    .showphonestyle{
        background-color: rgba(255, 255, 255, 0.4);
    }
    .showphonew{
        /*position: absolute;*/
        /*top: 30%;*/
        margin-top: 26%;
        width:400px;
        height: auto;
        border-radius: 10px;
        text-align: center;
        background-color: transparent;
    }
    .showphone-title{
        width: 100%;
        height: 80px;
        background-color: #557ae4;
        color: #fff;
        font-weight: 700;
        font-size: 26px;
        line-height: 80px;

    }
    .showphone-p{
        display: block;
        height: 80px;
        line-height: 80px;
        border-bottom:1px solid #D7D7D7;
        color: #333;
        font-size: 26px;
    }
    #message .show_province .van-picker__toolbar{
        height:80px;
        line-height: 80px;
    }
</style>
